<template>
    <div class="information" v-if="infoData.length != 0">
        <!-- <div class="brief"> {{ infoData.brief }}</div> -->
        <div class="block-title">相关资讯</div>
        <div class="new-list">
            <div class="event-tip">驱动事件</div>
            <div class="event-title">{{ infoData.driveEvent.title }}</div>
            <el-timeline>
                <div class="new-item" v-infinite-scroll="loadMor">
                    <el-timeline-item
                        v-for="(item,i) in infoData.newList"
                        :key="i"
                        :timestamp="item.publDate"
                        placement="top"
                        color="#2B2F3F"
                        size="normal"
                    >
                        <div class="title" @click.stop="showContent(item)">{{ item.title }}</div>
                    </el-timeline-item>
                </div>
            </el-timeline>
        </div>


    </div>
</template>

<script>
import newDetail from './newDetail.vue';
import {getInformation, getMorInformation} from '../api'
import {openWeb} from '@/common/common';
//import {getUrlParams} from '@/common/common';
//const {blockId} = getUrlParams();
export default {
    name: "Home",
    data() {
        return {
            infoData: '',
            param: {
                //blockId: blockId || '800881288',
                blockId: '',
                pageSize: 2,
                pageNum: 10
            },
            loading: false,
            noMore: false
        }
    },
    mounted() {
        // this.getInformation();
        window.getInit = (blockId = '') => {
            this.param.blockId = blockId;
            this.getInformation();
        }
    },
    methods: {
        // 获取资讯详情
        getInformation() {
            getInformation(this.param.blockId).then(res => {
                this.infoData = res.data;
                console.log(res)
            }).catch(err => {

            })
        },
        // 下拉获取更多
        loadMor() {
            if (this.loading || this.noMore) {
                return;
            }
            this.loading = true;
            getMorInformation(this.param).then(res => {
                if (res.data && res.data.length > 0) {
                    this.infoData.newList.push(...res.data);
                    this.param.pageSize += 1;
                } else {
                    this.noMore = true;
                }
                this.loading = false;
            }).catch(err => {
                this.loading = false;
            })
        },
        // 展示弹出
        showContent(item) {
            let address = this.urlAbsolute(`/information/index.html#/newDetail?newId=${item.guid}&stockId=${item.stockId}&kcType=${item.kcType}`)
            openWeb(address,'热点资讯',1);
            return;
            this.$layer.iframe({
                content: {
                    content: newDetail,
                    parent: this,
                    data: {newId: data.seq}
                },
                area: ['800px', '500px'],
                title: '',
                maxmin: true,
                shade: false,
                shadeClose: false,
                cancel: () => { //关闭弹窗事件

                }
            });
        }
    }
}
</script>

<style lang="scss">
html, body {
    background: #090910;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.information {
    .el-timeline-item {
        position: relative;
        padding-bottom: 0;
    }
    .el-timeline-item__timestamp.is-top {
        margin-bottom: 10px;
        padding-top: 20px;
    }
    .el-timeline-item__timestamp {
        color: #999999;
        line-height: 1;
        font-size: 15px;
    }
    .el-timeline-item__tail {
        position: absolute;
        left: 4px;
        height: 100%;
        border-left: 1px solid #1D202C;
    }
    .el-timeline-item__wrapper {
        position: relative;
        padding-left: 18px;
        top: 0;
    }
    .el-timeline-item__node--normal {
        left: 1px;
        top: 24px;
        width: 7px;
        height: 7px;
        background: #2B2F3F
    }
}

</style>
<style scoped lang="scss">
.information {
    background: #090910;

    box-sizing: border-box;

    .brief {
        color: #E5E5E5;
        font-size: 16px;
        // min-height: 276px;
        // max-height: 300px;
        height: 276px;
        line-height: 26px;
        overflow-y: auto;
        padding: 12px 15px;
    }

    .block-title {
        background: #1C1D21;
        font-size: 18px;
        color: #DBE2FF;
        padding: 9px 15px;
    }

    .new-list {
        line-height: 26px;
        font-size: 16px;

        .event-tip {
            color: #FF8A00;
            padding: 0 15px;
            margin-top: 16px;
        }
        .event-title {
            color: #E5E5E5;
            padding: 0 15px;
            border-bottom: 1px solid #27282E;
            border-radius: 1px;
            padding-bottom: 15px;
            box-sizing: border-box;
        }
        .new-item {
            padding: 0 15px;
            // min-height: 200px;
            // max-height: 300px;
            height: calc(100vh - 130px);
            overflow-y: auto;

            .time {
                color: #999999;
                font-size: 15px;
                line-height: 42px;
            }

            .title {
                background: #13151E;
                border: 1px solid #1D202C;
                font-size: 16px;
                font-family: Microsoft YaHei;
                color: #BCBFC4;
                line-height: 26px;
                padding: 7px 16px;
                &:hover {
                    background: #2D3245;
                    color: #fff;
                    cursor: pointer;
                }
            }
        }
    }

}

</style>